<!DOCTYPE html>
<html>
<head>
    <title>Archery - 两步验证</title>
    {% load static %}
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入 Bootstrap -->
    <link href="{% static 'bootstrap/css/bootstrap.min.css' %}" rel="stylesheet">
    <link href="{% static 'dist/css/login.css' %}" rel="stylesheet">
    <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
    <!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
    <!--[if lt IE 9]>
         <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
         <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
      <![endif]-->
    <link rel="shortcut icon" href="{% static 'img/favicon.ico' %}" />
</head>
<body onload="document.getElementById('otpCode').focus()" style="background-color:#edeff1;">
<div class="row lsb-login">
    <div class="col-sm-2 mypanalbox">
        <form class="login-form fade-in-effect" id="auth" method="post" role="form">
            {% csrf_token %}
            {% if auth_type == 'totp' %}
            <div class="form-group is-focused">
                <label class="control-label" for="otpCode">OTP验证码</label>
                <input class="form-control ng-valid ng-dirty ng-touched" id="otpCode" name="otpCode" type="text"
                       oninput="value=value.replace(/[^\d]/g,'')" autocomplete="off" required>

            </div>
            <div class="form-group">
                <button id="btnAuth" type="button" class="btn btn-success btn-block"><i class="fa-lock"></i>验证</button>
            </div>
            {% else %}
            <div class="form-group is-focused">
                <label class="control-label" for="otpCode">验证码</label>
                <input class="form-control ng-valid ng-dirty ng-touched" id="otpCode" name="otpCode" type="text"
                       oninput="value=value.replace(/[^\d]/g,'')" autocomplete="off" required>
            </div>
            <div class="form-group">
                <button id="btnCaptcha" type="button" class="btn btn-default btn-block" >获取验证码</button>
                <button id="btnAuth" type="button" class="btn btn-success btn-block" style="display: none"><i class="fa-lock"></i>验证</button>
            </div>
            {% endif %}
            <input type="text" style="display:none">
        </form>
    </div>
</div>

<!--底部部分 -->
<div class="user-bottom-div">
    <p><strong>&copy; Archery</strong>&nbsp;(v{{ archery_version }})</p>
</div>
<script src="{% static 'jquery/jquery.min.js' %}"></script>
<script src="{% static 'bootstrap/js/bootstrap.min.js' %}"></script>
</body>
<!-- 解决CSRF-->
<script>
    $(function () {
        $.ajaxSetup({
            headers: {"X-CSRFToken": getCookie("csrftoken")}
        });
    });

    function getCookie(name) {
        var cookieValue = null;
        if (document.cookie && document.cookie !== '') {
            var cookies = document.cookie.split(';');
            for (var i = 0; i < cookies.length; i++) {
                var cookie = jQuery.trim(cookies[i]);
                // Does this cookie string begin with the name we want?
                if (cookie.substring(0, name.length + 1) === (name + '=')) {
                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                    break;
                }
            }
        }
        return cookieValue;
    }
</script>
<script>

    //回车键提交验证
    $(document).ready(function () {
        $(document).keydown(function (event) {
            //keycode==13为回车键
            if (event.keyCode === 13) {
                let otp = $('#otpCode').val();
                authOTP(otp);
            }
        });
    });

    $('#btnAuth').click(function () {
        let otp = $('#otpCode').val();
        authOTP(otp);
    });

    function authOTP(otp) {
        $.ajax({
            type: "post",
            url: "/api/v1/user/2fa/verify/",
            dataType: "json",
            data: {
                engineer: '{{ username }}',
                otp: otp
            },
            complete: function () {
            },
            success: function (data) {
                if (data.status === 0) {
                    $(location).attr('href', '/index/');
                } else {
                    alert(data.msg)
                }
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                alert(errorThrown + ' : ' + XMLHttpRequest.responseText)
            }
        });
    };
</script>
</html>
